<template>
  <div>
    <p>test message is : {{ demoStr }} ++ {{ length }}</p>
    <input v-model="demoStr" />
    <span>{{ messageLength }}</span>

    <button @click="changeMessageLength"></button>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({
  computed: {
    messageLength: {
      get(): number {
        return this.demoStr.length;
      },
      set(newValue: any) {
        console.log(newValue);
        this.length = newValue;
      },
    },
  },
})
export default class ComputeVue extends Vue {
  demoStr: string = "testDemo";
  length: number = 0;
  changeMessageLength() {
    console.log("ss");
    this.messageLength++;
  }
}
</script>
<style lang="scss" scoped>
</style>